<template>
  <v-card flat class="Invoice-Container">
    <v-row class="header text-left align-start" no-gutters>
      <v-col :cols="3">
        <span class="mr-2 title">Invoice</span>
        <v-btn
          class="plus-btn"
          elevation="0"
          color="#D9D9D9"
          fab
          width="32"
          height="32"
        >
          <v-icon color="#626C84">mdi-plus-thick</v-icon>
        </v-btn>
      </v-col>
      <v-col v-if="invoiceInfo" class="ml-4" :cols="9">
        <v-row no-gutters class="justify-space-between">
          <v-col class="d-flex">
            <span class="title mr-4">
              {{ invoiceInfo.id }}
            </span>
            <v-chip
              :color="invoiceInfo.status === 'new' ? '#556282' : '#EB9B31'"
              class="mr-4"
              text-color="#fff"
              x-small
              label
              v-text="invoiceInfo.status"
            >
            </v-chip>
            <v-spacer>
              <v-col class="py-0">
                <em>
                  Add by {{ invoiceInfo.createName }} @
                  {{ invoiceInfo.createDate }}
                </em>
              </v-col>
              <v-col class="py-0">
                <em>
                  Last Modified by {{ invoiceInfo.lastModifiedName }} @
                  {{ invoiceInfo.lastModifiedDate }}
                </em>
              </v-col>
            </v-spacer>
          </v-col>
          <v-col class="header-action flex-grow-0 d-flex mr-4">
            <v-icon color="#BABABC">mdi-check-circle</v-icon>
            <v-icon color="#BABABC">mdi-close-circle</v-icon>
            <v-icon @click="openSendInvoiceDialog" color="#BABABC"
              >mdi-send</v-icon
            >
            <v-icon color="#BABABC">mdi-email</v-icon>
          </v-col>
        </v-row>
      </v-col>
    </v-row>
    <v-row class="content" no-gutters>
      <v-col class="InvoiceList-wrap" :cols="3">
        <InvoiceList
          @openDeleteQuoteDialog="openDeleteInvoiceDialog"
        ></InvoiceList>
      </v-col>
      <v-col class="InvoiceDetails-wrap ml-4" :cols="9">
        <InvoiceDetails
          v-if="invoiceInfo"
          :quoteId="invoiceInfo.id"
        ></InvoiceDetails>
      </v-col>
    </v-row>
  </v-card>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import InvoiceList from "@/components/Invoice/InvoiceList/InvoiceList.vue";
import InvoiceDetails from "@/components/Invoice/InvoiceDetails/InvoiceDetails.vue";
import Dialog from "@/components/Maintenance/Dialog/Dialog.vue";
@Component({
  components: {
    InvoiceList,
    InvoiceDetails,
    Dialog,
  },
})
export default class Invoice extends Vue {
  dialogTitle = "";
  showDialog = false;
  openSendInvoiceDialog() {
    this.dialogTitle = "Send";
    this.openDialog();
  }

  openDeleteInvoiceDialog() {
    this.dialogTitle = "Delete";
    this.openDialog();
  }

  openDialog() {
    this.showDialog = true;
  }

  get invoiceInfo() {
    return this.$store.state.InvoiceStore.invoiceInfo;
  }
}
</script>
<style lang="scss">
@import "./index.scss";
</style>
